import { assetOverview } from "@/data/mockData";

export function fundsName() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const originalNameContainer = document.querySelector(
    ".userinfo-name > .nickname"
  );
  if (originalNameContainer) {
    if (!originalNameContainer.querySelector(".my-fund-name-overlay")) {
      const nameOverlay = document.createElement("div");
      nameOverlay.setAttribute("class", "my-fund-name-overlay");
      nameOverlay.setAttribute(
        "style",
        "position: absolute;\n" +
          "left: 0;\n" +
          "top: 0;\n" +
          "width: 100%;\n" +
          "height: 100%;\n" +
          "z-index: 20;\n" +
          "background-color: #f8fafd;\n"
      );
      nameOverlay.innerHTML = userInfo.nick;
      originalNameContainer.style.position = "relative";
      originalNameContainer.appendChild(nameOverlay);
    }
  }
}

export function fundsAvatar() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const originalAvatarContainer = document.querySelector(
    ".myaccount_avatar_tags"
  );
  if (originalAvatarContainer) {
    const interval = setInterval(() => {
      const imgOverlay =
        originalAvatarContainer.querySelector(".my-avatar-img");
      console.log(imgOverlay, "imaaaaaaaaaaaaaaaa");

      if (imgOverlay) {
        imgOverlay.remove();
        clearInterval(interval);
      }
    }, 100);

    if (!originalAvatarContainer.querySelector(`.my-fund-avatar-overlay`)) {
      const overlay = document.createElement("img");
      overlay.classList.add(`my-fund-avatar-overlay`);
      overlay.setAttribute(
        "style",
        "position: relative;\n" +
          " left: 0;\n" +
          " top: -52rem;\n" +
          " width: 96rem;\n" +
          " height: 96rem;\n" +
          " z-index: 100;"
      );
      overlay.setAttribute("src", userInfo.avatar);
      //   originalAvatarContainer.style.position = "relative";
      originalAvatarContainer.appendChild(overlay);
    }
  }
}

export function fundAssets() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const interval = setInterval(() => {
    const originalVolumeContainer = document.querySelector(
      "#userinfo-volume-num-btc > .userinfo-volume-num"
    );
    let volumeChange = false;
    const originalGTContainer = document.querySelector(
      "#userinfo-volume-num-gt > .userinfo-volume-num"
    );
    let gtChange = false;

    console.log(
      originalVolumeContainer,
      originalGTContainer,
      "originalVolumeContainer"
    );

    if (originalVolumeContainer && !volumeChange) {
      originalVolumeContainer.innerText = userInfo.asset;
      volumeChange = true;
      console.log(originalVolumeContainer, "userInfo.fundAssets");
      // clearInterval(interval);
    }
    if (originalGTContainer && !gtChange) {
      originalGTContainer.innerText = userInfo.averageHolding;
      gtChange = true;
      console.log(originalGTContainer, "userInfo.fundAssets");
      // clearInterval(interval);
    }
    if (volumeChange && gtChange) {
      clearInterval(interval);
    }
  });
  // const originalVolumeContainer = document.querySelector('.userinfo-volume-num-btc > .userinfo-volume-num')
  // console.log(originalVolumeContainer, 'originalVolumeContainer');

  // if (originalVolumeContainer) {
  //     originalVolumeContainer.innerText = userInfo.fundAssets

  // }
}

let fundValuationInterval = null;
export function fundValuation() {
  if (fundValuationInterval) {
    clearInterval(fundValuationInterval);
    fundValuationInterval = null;
  }

  if (window.location.href !== "https://www.gate.com/zh/myaccount/myfunds") {
    return;
  }

  fundValuationInterval = setInterval(() => {
    const originalTotal = document.querySelector(
      "#valuation-total-funds > .hidden-funds-num"
    );
    if (originalTotal) {
      originalTotal.innerText = assetOverview.totalValuation;
    }
    console.log(assetOverview.totalValuation, "totalValuation");

    const originalBTC = document.querySelectorAll(
      ".valuation-exchange > .hidden-funds-num"
    );

    if (originalBTC[0]) {
      originalBTC[0].innerText = `≈ ${assetOverview.totalValuationBTC} BTC`;
    }

    const originalProfit = document.querySelector(
      ".valuation-detail-value > .hidden-funds-num"
    );
    if (originalProfit) {
      originalProfit.innerText = assetOverview.profitAndLoss;
    }
    if (originalBTC[1]) {
      originalBTC[1].innerText = `≈ ${assetOverview.profitAndLossBTC} BTC`;
    }
    const originalAccount = document.querySelectorAll(
      ".account-balance > .balance-num:not(.p2p-balance-num)"
    );
    const accountValues = [
      assetOverview.spotAccount,
      assetOverview.alphaAccount,
      assetOverview.contractAccount,
      assetOverview.innovationAccount,
      assetOverview.leverageAccount,
      assetOverview.documentationAccount,
      assetOverview.robotAccount,
      assetOverview.financeAccount,
      assetOverview.optionAccount,
      assetOverview.paymentAccount,
      assetOverview.gateCard,
    ];

    // 遍历 originalAccount 节点并赋值
    originalAccount.forEach((node, index) => {
      if (index < accountValues.length) {
        node.innerText = accountValues[index]; // 将对应的值赋给节点
      }
    });
    clearInterval(fundValuationInterval);
  }, 100);
}

export function fundsMyAccount() {
  const originalAccount = document.querySelectorAll(
    ".account-balance > .balance-num:not(.p2p-balance-num)"
  );
  console.log(originalAccount, "originalAccount");
  const accountValues = [
    assetOverview.spotAccount,
    assetOverview.alphaAccount,
    assetOverview.contractAccount,
    assetOverview.innovationAccount,
    assetOverview.leverageAccount,
    assetOverview.documentationAccount,
    assetOverview.robotAccount,
    assetOverview.financeAccount,
    assetOverview.optionAccount,
    assetOverview.paymentAccount,
    assetOverview.gateCard,
  ];

  // 遍历 originalAccount 节点并赋值
  originalAccount.forEach((node, index) => {
    if (index < accountValues.length) {
      node.innerText = accountValues[index]; // 将对应的值赋给节点
    }
  });
}
